<script setup lang='tsx' name='Chat'>

import ChatAsideItem from './components/chat-aside-item.vue'
import ChatHistory from './components/chat-history.vue'
import { useChatStore } from '@/stores/chat'
const chatStore = useChatStore()
const { chatroomList, currentHistory } = storeToRefs(chatStore)

const iconStyle = { width: '30px', height: '30px' }
const value = ref('')
function send() {
    chatStore.sendMessage(value.value)
    value.value = ''
}
</script>

<template>
    <el-container h-full>
        <el-aside width="200px" class="chat-aside">
            <ChatAsideItem :selectd="chatStore.currentChatroom === item.id" @click="chatStore.changeChatroom(item)"
                v-for="(item, i) in  chatroomList" :key="item.id" :chat-name="item.name" :last-msg="''">
            </ChatAsideItem>
        </el-aside>
        <el-container>
            <el-main style="background-color: #f5f5f5;">
                <div style="height: 84vh;position: relative;">
                    <div id="chatBox" class="chat-main" style="height: calc(100% - 200px);overflow-y: auto;flex:1">
                        <template v-for="(item, i) in currentHistory" :key="item.id">
                            <ChatHistory :history="item"></ChatHistory>
                        </template>
                    </div>
                    <div class="chat-input-box h-200px w-full">
                        <div class="chat-icon">
                            <SvgIcon name="icon-emoji" :icon-style="iconStyle"></SvgIcon>
                            <SvgIcon name="icon-img" :icon-style="iconStyle"></SvgIcon>
                            <SvgIcon name="icon-file" :icon-style="iconStyle"></SvgIcon>
                        </div>
                        <div class="chat-input">
                            <div style="height: 100px;width: 100%;" mb-14px>
                                <el-input autosize h-full w-full resize="none" v-model="value" type="textarea"
                                    @keyup.enter="send"></el-input>
                            </div>
                            <el-button type="primary" @click="send">发送</el-button>
                        </div>
                    </div>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>

<style lang='scss' scoped>
.chat-aside {
    overflow-y: auto;
    border-right: 1px solid #e6e6e6;
}

.chat-input-box {
    position: absolute;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    border-top: 1px solid #c5c5c5;
    padding-top: 10px;

    .chat-icon {
        display: flex;
        gap: 14px;
        margin-bottom: 16px;
    }

    .chat-input {
        display: flex;
        flex-direction: column;
        align-items: end;


    }
}

:deep(.el-textarea__inner),
:deep(.el-textarea) {
    height: 100% !important;
}
</style>